<template>
  <el-dialog
    :title="this.$i18n.t('product.relatedItems')"
    :visible.sync="visible"
    :before-close="closeDialog"
  >
    <el-button type="primary" @click="selectSingleProds()">{{
      $t("product.chooSingPro")
    }}</el-button>
    <el-table :data="retailProdTable" style="width: 100%">
      <el-table-column
        prop="name"
        :label="this.$i18n.t('product.itemName')"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="spec"
        :label="this.$i18n.t('product.singleProdSpe')"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="retailNums"
        :label="this.$i18n.t('product.quantityInCom')"
      >
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.retailNums"
            @change="countTotal(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="costPrice"
        :label="this.$i18n.t('product.singleProd')"
      ></el-table-column>
      <el-table-column
        prop="total"
        :label="this.$i18n.t('product.total')"
      ></el-table-column>
      <el-table-column
        prop="stocks"
        :label="this.$i18n.t('product.singleProdInve')"
      ></el-table-column>
    </el-table>
    <!-- <el-dialog width="50%" title="选择单品" :visible.sync="innerVisible" append-to-body></el-dialog> -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{
        $t("crud.filter.cancelBtn")
      }}</el-button>
      <el-button @click="confirm">{{ $t("crud.filter.submitBtn") }}</el-button>
    </div>
    <!-- 单品选择弹窗  测试完之后添加这个链接  dataUrl='/group/prod/getNotGroupProdPage'-->
    <single-prods-select
      v-if="sprodVisible"
      ref="singleProdsSelect"
      @refreshSelectSingleProds="getRetailTable"
    ></single-prods-select>
  </el-dialog>
</template>

<script>
import SingleProdsSelect from '@/components/single-prods-select'
import Big from 'big.js'

export default {
  components: {
    SingleProdsSelect
  },
  data () {
    return {
      visible: false,
      sprodVisible: false,
      retailProdTable: [],
      rowOriData: null,
      oriIndex: null
    }
  },
  methods: {
    init (row, index) {
      this.visible = true
      this.rowOriData = row
      this.oriIndex = index
      this.retailProdTable = row.skuSingleProds
    },
    getRetailTable (prods) {
      if (prods) {
        prods.forEach(item => {
          let total = new Big(item.costPrice)
          item.total = total.times(item.retailNums).toFixed(2)
        })
        this.retailProdTable = prods
      }
    },
    selectSingleProds () {
      this.sprodVisible = true
      this.$nextTick(() => {
        this.$refs.singleProdsSelect.init(this.retailProdTable)
      })
    },
    countTotal (rowData) {
      let total = new Big(rowData.costPrice)
      if (!/^[0-9]\d*$/.test(rowData.retailNums)) {
        this.$message.error(this.$i18n.t('retailProd.tipError'))
        return
        // return new Error(this.$i18n.t('formData.pleaseThan0'))
      }
      rowData.retailNums = parseInt(rowData.retailNums)
      rowData.total = total.times(rowData.retailNums).toFixed(2)
      // let index = this.retailProdTable.findIndex((item) => item.retailProdId === rowData.retailProdId)
      // this.$set(this.retailProdTable, index, this.retailProdTable[index])
    },
    // 关闭弹窗
    closeDialog () {
      this.visible = false
      this.retailProdTable = []
    },
    confirm () {
      if (this.retailProdTable === null || this.retailProdTable === undefined || this.retailProdTable.length <= 0) {
        return this.$message.error(this.$i18n.t('retailProd.tip2Error'))
      }
      for (let i = 0; i < this.retailProdTable.length; i++) {
        if (!/^[0-9]\d*$/.test(this.retailProdTable[i].retailNums)) {
          return this.$message.error(this.$i18n.t('retailProd.tipError'))
        }
      }
      this.rowOriData.skuSingleProds = this.retailProdTable
      this.$emit('refreshSelectSingleProds', this.rowOriData, this.oriIndex)
      this.visible = false
    }
  }
}
</script>
